<template>
    <div class="menu">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false" v-if="isCollapse">展开</el-radio-button>
            <el-radio-button :label="true" v-if="!isCollapse">折叠</el-radio-button>
        </el-radio-group>
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose" router>
            <el-menu-item index="/home">
                <el-icon>
                    <house />
                </el-icon>
                <template #title>系统首页</template>
            </el-menu-item>
            <el-sub-menu index="/company">
                <template #title>
                    <el-icon @click.stop="changeMenu('/company/companyInfo')" :class="activeFather == 0 ? 'active' : ''">
                        <OfficeBuilding />
                    </el-icon>
                    <span @click.stop="changeMenu('/company/companyInfo')" :class="activeFather == 0 ? 'active' : ''">企业信息</span>
                </template>
                <el-menu-item index="/company/list">数采仪设备列表</el-menu-item>
                <el-menu-item index="/company/electric">用电监控设备</el-menu-item>
                <el-menu-item index="/company/edit">添加或编辑</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/data">
                <template #title>
                    <el-icon :class="activeFather == 1 ? 'active' : ''">
                        <Files />
                    </el-icon>
                    <span @click.stop="changeMenu('/dataQuery/dataQuery')" :class="activeFather == 1 ? 'active' : ''">数据查询</span>
                </template>
                <el-menu-item index="/dataQuery/elecQuery">用电查询</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/dataReport">
                <el-icon >
                    <Calendar />
                </el-icon>
                <template #title>数据报表</template>
            </el-menu-item>
            <el-sub-menu index="/control">
                <template #title>
                    <el-icon :class="activeFather == 2 ? 'active' : ''">
                        <SetUp />
                    </el-icon>
                    <span @click.stop="changeMenu('/control/controlAll')" :class="activeFather == 2 ? 'active' : ''">综合性管理</span>
                </template>
                <el-menu-item index="/control/weather">重度污染天气管理</el-menu-item>
                <el-menu-item index="/control/money">模拟排污费管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/onlineReport">
                <el-icon>
                    <DataLine />
                </el-icon>
                <template #title>线上报告</template>
            </el-menu-item>
            <el-sub-menu index="/alert">
                <template #title>
                    <el-icon :class="activeFather == 3 ? 'active' : ''">
                        <Bell />
                    </el-icon>
                    <span @click.stop="changeMenu('/alert/data')" :class="activeFather == 3 ? 'active' : ''">报警数据</span>
                </template>
                <el-menu-item index="/alert/setting">报警设置</el-menu-item>
                <el-menu-item index="/alert/ignore">豁免设置</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/systemControl">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>系统设置</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import {
    Files,
    Menu as IconMenu,
    Bell,
    Setting,
    House,
    OfficeBuilding,
    Calendar,
    SetUp,
    DataLine
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const isCollapse = ref(false)
let activeIndex = ref('/home')
let activeFather = ref(-1)
let fathers = ['/company', '/dataQuery', '/control', '/alert']
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

const changeMenu = (path: string) => {
    router.push(path);
    activeIndex.value = path;
}
onMounted(() => {
    activeIndex.value = router.currentRoute.value.fullPath;
    activeFather.value = fathers.indexOf(router.currentRoute.value.matched[1].path);
})
watch(() => router.currentRoute.value, (newValue) => {
    activeIndex.value = newValue.fullPath
    activeFather.value = fathers.indexOf(newValue.matched[1].path)
})
</script>

<style>
.menu {
    height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-radio-group {
    margin-top: 10px;
    width: 100%;
}

.el-radio-button {
    margin: 0 auto;
}

/* 文字 */
.el-submenu.is-active>.el-submenu__title {
    color: #409eff !important;
}

/* icon图标也跟着变 */
.el-submenu.is-active>.el-submenu__title i {
    color: #409eff !important;
}
.active {
    color: #409eff !important;
}
</style>
